<template>
	<div>
		<basic-container>
			<avue-data-box :option="option1"></avue-data-box>
		</basic-container>
		<!-- 
		<el-row :span="24">
			<el-col :span="24">
				<basic-container>
					<avue-data-tabs :option="option"></avue-data-tabs>
				</basic-container>
			</el-col>
		</el-row> -->
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import request from "@/router/axios";
	import {
		baseUrl
	} from '@/config/env';
	export default {
		name: "wel",
		data() {
			return {
				res: {}
			}
		},
		computed: {
			...mapGetters(["userInfo"]),

			option1() {
				return {
					span: 6,
					data: [{
							title: this.$t("index.count"),
							count: this.res.count,
							icon: "el-icon-warning",
							color: "rgb(49, 180, 141)",
							//href: "https://avuejs.com",
							target: "_self"
						},
						{
							title: this.$t("index.online"),
							count: this.res.online,
							icon: "el-icon-view",
							color: "rgb(56, 161, 242)",
							//href: "https://avuejs.com",
							target: "_self"
						},
						{
							title: this.$t("index.notline"),
							count: this.res.notline,
							icon: "el-icon-setting",
							color: "rgb(117, 56, 199)",
							//href: "https://avuejs.com",
							target: "_self"
						},
						{
							title: this.$t("index.onlinePercentage"),
							count: this.res.onlinePercentage,
							icon: "el-icon-setting",
							color: "rgb(230, 71, 88)",
							//href: "https://avuejs.com",
							target: "_self"
						}
					]
				};
			},
			option() {
				return {
					span: 8,
					data: [{
							title: this.$t("index.todayAdd"),
							//subtitle: this.$t("wel.data.subtitle"),
							count: 0,
							allcount: this.res.contactCount,
							//text: this.$t("wel.data.text1"),
							color: "rgb(27, 201, 142)",
						},
						{
							title: this.$t("index.weekAdd"),
							//subtitle: this.$t("wel.data.submitText2"),
							count: 0,
							allcount: this.res.contactCount,
							//text: this.$t("wel.data.text2"),
							color: "rgb(230, 71, 88)",
						},
						{
							title: this.$t("index.monthAdd"),
							//subtitle: this.$t("wel.data.subtitle3"),
							count: 0,
							allcount: this.res.contactCount,
							//text: this.$t("wel.data.text3"),
							color: "rgb(56, 161, 242)",
						}
					]
				};
			},
		},
		created() {
			this.getTop();
		},
		methods: {
			getTop() {
				let that = this;
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/Device/getTop",
						data: {}
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
							return;
						} else if (response.data.status == 1) {
							that.res = response.data.data;
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("message.systemError"));
					});
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.wel {
		&__header {
			padding: 25px 40px;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__info {
			display: flex;
			align-items: center;

			&-img {
				border-radius: 72px;
				display: block;
				width: 72px;
				height: 72px;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&-content {
				position: relative;
				margin-left: 24px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}

			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 12px;
			}

			&-subtitle {
				position: relative;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}
		}

		&__extra {
			&-item {
				position: relative;
				padding: 0 32px;
				display: inline-block;

				&:last-child {
					&::after {
						display: none;
					}
				}

				&:after {
					background-color: #e8e8e8;
					position: absolute;
					top: 30px;
					right: 0;
					width: 1px;
					height: 40px;
					content: "";
				}
			}

			&-title {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 4px;
			}

			&-subtitle {
				color: rgba(0, 0, 0, 0.85);
				font-size: 30px;
				line-height: 38px;
				margin: 0;

				span {
					color: rgba(0, 0, 0, 0.45);
					font-size: 20px;
				}
			}
		}
	}
</style>
